<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: 1px solid #90b
    }
  </style>
</head>
<body>
  <button id="btn">点击发送请求</button>
  


  <script>
    const btn = document.getElementById('btn')

    let x = null
    
    // 标识变量
    let isSending = false //是否在发送ajax请求

    btn.onclick = function () {
      // 判断标识变量
      if(isSending) x.abort() // 如果正在发送则取消,创建新请求
      x = new XMLHttpRequest()

      // 修改标识状态
      isSending = true

      x.open('GET', 'http://127.0.0.1:8000/delay') 
      x.send()
      x.onreadystatechange = function () {
        if(x.readyState === 4) {
          isSending = false
          // 为什么不在200-300判断 因为可能是失败的请求 做了200-300就只判断成功的情况了
        }
      }
    }




  </script>







</body>
</html>